<!-- <script setup>
import {ref} from "vue"
const isShow=ref(true)

function btn() {
  console.log("切换");
  console.log(!isShow);
  
  isShow.value=!isShow.value
}
</script>
<template>
<div>
<div v-if="isShow">
这是文本
</div>

  <input type="button"  value="切换显示/隐藏"  @click="btn">

</div>
</template> -->
<!-- <script setup>
import {ref} from "vue"

let isShow=ref(true)
function show() {
  isShow.value=true
} 

function hidden () {
  isShow.value=false

}
</script>  
<template>
  <div v-show="isShow">
<p>
  现在是周一
</p>
  </div>
  <div>
    <input type="button" value="显示" @click="show">
    <input type="button" value="隐藏"  @click="hidden">

  </div> -->
<!-- </template> -->
 <!-- <script setup> 
 let isIf=ref(true)
 let keyWord=ref("")
 import{ref} from "vue"
 let arr=ref([
  "这是一段文本",
  "这是第二段文本"
])
console.log(arr);

function addBtn() {
  console.log(keyWord);
  
  isIf.value=false
   arr.value.push(keyWord)
}
</script>
 <template>
<div>  <input type="text" placeholder="请输入...."  name="keyWord" v-model="keyWord">
  <input type="button" value="添加" @click="addBtn">
</div>

  <div v-if="isIf">
<p>列表为空</p>
</div>
  <div v-else="!isIf">
    <table>
      <thead>
        <tr v-for="(  item,index) in arr":key="index">
          <td>{{ item }}</td>
        </tr>
      </thead>
    </table>   
</div>

 </template> -->
 <!-- <script setup>
 import {ref} from "vue"
 let  isIf=ref(true)
 function btnA() {
  isIf.value=true
 }
 function btnB() {
  isIf.value=false

}
</script>  
 <template>
<div>
<input type="button" value="显示a" @click="btnA">  
<input type="button" value="显示b" @click="btnB">  
<div v-if="isIf">
<h3>这是组件a</h3>
</div>
<div v-else="isIf">
  <h3>这是组件b</h3>

</div>
</div>
 </template> -->
 <!-- <script setup>
import { ref } from 'vue';
任务： 创建一个 Vue 3 应用，页面上有一个对象数组，每个对象包含 name 和 age 属性。
使用 v-for 将对象数组中的每个对象渲染到一个列表中，显示每个对象的 name 和 age。
let  fruit=ref(['苹果', '香蕉', '橙子'])

</script>
 <template>
<div v-for="(item,index) in fruit" :key="index">
<li>{{ item }}</li>
</div>
 </template> -->
 <!-- 任务： 创建一个 Vue 3 应用，
 页面上有一个对象数组，每个对象包含 name 和 age 属性。使用 v-for 
 将对象数组中的每个对象渲染到一个列表中，显示每个对象的 name 和 age。
 <script setup>
import { ref } from 'vue';

let user=ref([ { name: '张三', age: 20 }, { name: '李四', age: 22 } ])
</script>
 <template>
 <div v-for="(item,index) in user" :key="index">
  <li>{{ item.name }}-{{ item.age }}</li>
 </div>
 </template> -->
 <!-- 任务： 创建一个 Vue 3 应用，页面上有一个输入框和一个按钮，\
  以及一个列表。用户在输入框中输入内容，点击按钮后，将输入的内容添加到列表中。
  使用 v-for 渲染列表。

要求：

列表初始为空。
用户输入内容并点击按钮后，内容添加到列表中。
使用 v-for 渲染列表。
参考效果如下图。
 <script setup>
import { ref } from 'vue';
 let user=ref([])
 let isShow=ref(false)
 let keyWord=ref("")
  function addBtn(){
    
    isShow.value=true
    user.value.push(keyWord.value)
    console.log(user.value);

 }
</script>
 <template>
 <div>
  <input type="text" placeholder="请输入..." v-model="keyWord">
  <input type="button" value="添加" @click="addBtn">
  <div v-for="(item,index) in user":key="index" v-show="isShow">
<li>{{ item }}</li>
  </div>
 </div>
 </template> -->
 <!-- 创建一个 Vue 3 应用，页面上有一个嵌套数组，
 每个子数组包含多个字符串。使用 v-for 渲染嵌套列表，
 外层列表显示子数组的索引，内层列表显示子数组中的每个字符串。
 <script setup>
import { ref } from 'vue';
let fruit=ref([['苹果', '香蕉'], ['橙子', '葡萄']])

</script>
<template>
  <div v-for="(item,index) in fruit" :key="index">
    <li>数组{{ index+1 }} </li>
    <div v-for="(item1,index1) in item":key="index1" >
      <li>{{ item1 }}</li>
    </div>


  </div>
</template> -->
<!-- 第一种 -->
<!-- <script setup>
import { ref } from 'vue';

let user=ref([ { group: 'A', name: '张三' }, 
{ group: 'B', name: '李四' }, { group: 'A', name: '王五' } ])
let AUser=ref([])
let BUser=ref([])


 for (let index = 0; index < user.value.length; index++) {
  
if (user.value[index].group==='A') {
  AUser.value.push(user.value[index])
}  
else{
  BUser.value.push(user.value[index])

}
 }



</script>
<template>
<div class="group">
    <h3>A组</h3>
    <ul>
      <li v-for="item in AUser" :key="item.name">
        {{ item.name }}
      </li>
    </ul>
  </div>

  B组列表 -->
  <!-- <div class="group">
    <h3>B组</h3>
    <ul>
      <li v-for="item in BUser" :key="item.name">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template> -->
<!-- 任务： 创建一个 Vue 3 应用，页面上有一个对象数组，每个对象包含 name 和 age 属性。使用 v-for 渲染列表，并提供两个按钮，分别用于按 name 和 age 排序。

要求：

对象数组初始值为 [ { name: '张三', age: 20 }, { name: '李四', age: 22 }, { name: '王五', age: 18 } ]。
使用 v-for 渲染列表。
提供两个按钮，分别用于按 name 和 age 排序。
参考效果如下图。 -->
<script setup>
let user=ref([ { name: '张三', age: 20 }, { name: '李四', age: 22 }, { name: '王五', age: 18 } ])

</script>
<template>
<div>
  <input type="button" value="名字" @click="nameBtn" >
  <input type="button" value="年龄" @click="ageBtn"  >

</div>
</template>
<!--要求：页面上有一个列表，包含三个列表项 <li>。使用数组形式的 -->
<!--:class 绑定，为每个列表项动态添加一个类名“list-item”，并且当鼠标悬停在某个列表项上时，-->
<!--为其添加“hovered”类，离开时移除该类。-->
<!--提示：数组中可以包含字符串（静态类名）和对象（动态类名）-->
<!--，利用 Vue 的事件绑定来控制动态类名的添加和移除。-->


<!--&lt;!&ndash;        当选中的时候就有index,在没选时是-1&ndash;&gt;-->
<!--<template>-->
<!--<div>-->
<!--  <ul>-->
<!--    <li v-for="(item,index) in  user" :key="index"-->

<!--   :class="[`list-item`,{ 'hovered': hoverIndex === index }]"-->
<!--        @mouseenter="hoverIndex = index"-->
<!--        @mouseleave="hoverIndex = -1"-->
<!--    >-->
<!--      {{item}}-->
<!--    </li>-->
<!--  </ul>-->
<!--</div>-->
<!--</template>-->
<!--<script setup>-->
<!--import {ref} from "vue";-->

<!--const hoverIndex=ref(-1)-->
<!--let user=ref([`张三`,`李四`,`王五`])-->

<!--</script>-->
<!--<style scoped>-->
<!--.list-item {-->
<!--  padding: 8px;-->
<!--  margin: 4px 0;-->
<!--  transition: all 0.3s;-->
<!--}-->

<!--.hovered {-->
<!--  background-color: #f0f0f0;-->
<!--  transform: scale(1.02);-->
<!--  box-shadow: 0 2px 8px rgba(0,0,0,0.1);-->
<!--}-->
<!--</style>-->
<!--要求：创建一个表单输入框 <input>，当输入框获得焦点时，为其添加“focused”类，-->
<!--失去焦点时移除该类。同时，根据输入框的值是否为空，动态绑定“valid”（值不为空时）或“invalid”（值为空时）类。使用对象形式的 :class 绑定来实现。-->
<!--提示：结合 Vue 的事件监听（@focus、@blur）和数据绑定来控制类名的动态变化。-->
<script setup>
import {ref} from "vue";
let is=ref(true)

</script>
<template>
  <div>
    <input type="text" placeholder="请输入...." @focus="is=!is" name="txt" class="[focused:is,]">
  </div>
</template>
<style scoped>
/* 基础样式 */
input {
  padding: 8px 12px;
  border: 2px solid #ccc;
  border-radius: 4px;
  transition: all 0.3s ease;
  outline: none;
}

/* 焦点状态 */
.focused {
  border-color: #409eff;
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.3);
}

/* 有效状态 */
.valid {
  border-color: #67c23a;
  background-color: rgba(103, 194, 58, 0.05);
}

/* 无效状态 */
.invalid {
  border-color: #f56c6c;
  background-color: rgba(245, 108, 108, 0.05);
}

/* 占位符样式 */
input::placeholder {
  color: #999;
}
</style>
题目描述：创建一个 Vue 3 应用，页面上有一个输入框，当用户在输入框中输入内容时，页面上实时显示输入的内容。 -->
<!-- <script setup>
import {  computed, ref } from 'vue';

let inputV=ref("")
const inputVa=computed(()=>{
  get:inputV.value
  set:(val)=>{
    inputV.value=val
  }
})
</script>
<template>
  <div>
    <input type="text" placeholder="请输入..." v-model="inputVa"  >
<p>{{ inputVa }}</p>
  </div>
</template> -->
<!-- <script setup>
import { ref, computed } from 'vue'

const rawText = ref('')
const formattedText = computed({
  get: () => rawText.value,
  set: (val) => {
    rawText.value = val // 自动去空格并限制20字符
  }
  
})

</script>

<template>
  <input
    v-model="formattedText"
    placeholder="请输入..."
  >
  <p>已输入：{{ formattedText }} ({{ formattedText.length }}/20)</p>
</template> -->
<!-- 创建一个 Vue 3 应用，页面有一个上表单，
表单中有用户名和密码输入框，当点击提交按钮时，
验证用户名和密码是否为空，如果为空，则在页面上显示相应的提示信息。 -->
<script setup>
import { ref ,computed} from 'vue';
let userV=ref("")
let passWordV=ref("")
const smt=computed(()=>{

})


</script>
<template>
<div>
<form>
  账号 <input type="text"  placeholder="请输入账号" v-model="userV"><br>
 密码<input type="text" placeholder="请输入密码" v-model="passWordV"><br>
 <input type="submit" @click="smt" >
</form>
</div>
</template>